Vue3深入组件-自定义事情

事件名

不同于组件和 prop，事件名不存在任何自动化的大小写转换。而是触发的事件名需要完全匹配监听这个事件所用的名称。

this.$emit('myEvent')
<!-- 没有效果 -->
<my-component @my-event="doSomething"></my-component>

DOM 模板会自动转换事件名为全小写 (因为 HTML 是大小写不敏感的)，所以 @myEvent 将会变成 @myevent——导致 myEvent 不可能被监听到。

因此，我们推荐你始终使用 kebab-case 的事件名。

定义自定义事件

可以通过 emits 选项在组件上定义已发出的事件。

app.component('custom-form', {
  emits: ['in-focus', 'submit']
})

当在 emits 选项中定义了原生事件 (如 click) 时，将使用组件中的事件替代原生事件侦听器。

建议定义所有发出的事件，以便更好地记录组件应该如何工作。

验证抛出的事件

要添加验证，将为事件分配一个函数，该函数接收传递给 $emit 调用的参数，并返回一个布尔值以指示事件是否有效。

<template>
  <div class="valid-emits-child">
    <button @click="submitForm"></button>
  </div>
</template>

<script>
export default {
  emits: {
    // 没有验证
    click: null,
    // 验证submit 事件
    submitChild: ({ email, password }) => {
      if (email && password) {
        return true;
      } else {
        console.error("Invalid submit event payload!");
        return false;
      }
    },
  },
  methods: {
    submitForm() {
      const email = "";
      const password = "";
      this.$emit("submitChild", { email, password });
    },
  },
};
</script>

经测试：验证失败并不阻止 submitChild 事件支持

v-model 参数

默认情况下，组件上的 v-model 使用 modelValue 作为 prop 和 update:modelValue 作为事件。我们可以通过向 v-model 传递参数来修改这些名称。子组件将需要一个 title prop 并发出 update:title 要同步的事件。

// 父组件
<template>
  <div class="single-model">
    {{ bookTitle }}
    <SingleModelChild v-model:title="bookTitle"></SingleModelChild>
  </div>
</template>

<script>
import SingleModelChild from "./SingleModelChild.vue";
export default {
  data() {
    return {
      bookTitle: "我是书本",
    };
  },
  components: {
    SingleModelChild,
  },
};
</script>

// 子组件
<template>
  <div class="single-model-child">
    {{ title }}
    <button @click="changeTitle"></button>
  </div>
</template>

<script>
export default {
  props: ["title"],
  emits: ["update:title"],
  methods: {
    changeTitle() {
      this.$emit("update:title", "我是树11");
    },
  },
};
</script>

多个 v-model 绑定

我们现在可以在单个组件实例上创建多个 v-model 绑定。每个 v-model 将同步到不同的 prop，而不需要在组件中添加额外的选项：

// 父组件
<template>
  <div class="mord-model">
    {{ firstName }}-{{ lastName }}
    <MoreModelChild
      v-model:first-name="firstName"
      v-model:last-name="lastName"
    ></MoreModelChild>
  </div>
</template>

<script>
import MoreModelChild from "./MoreModelChild.vue";
export default {
  data() {
    return {
      firstName: "我是第一个名字",
      lastName: "我是最后一个名字",
    };
  },
  components: {
    MoreModelChild,
  },
};
</script>

// 子组件
<template>
  <div class="more-model-child">
    {{ firstName }}-{{ lastName }}
    <button @click="changeName"></button>
  </div>
</template>

<script>
export default {
  props: {
    firstName: String,
    lastName: String,
  },
  emits: ["update:firstName", "update:lastName"],
  methods: {
    changeName() {
      this.$emit("update:firstName", "我是树11");
      this.$emit("update:lastName", "我是树22");
    },
  },
};
</script>

处理 v-model 修饰符

在 3.x 中，添加到组件 v-model 的修饰符将通过 modelModifiers prop 提供给组件：

让我们创建一个示例自定义修饰符 capitalize，它将 v-model 绑定提供的字符串的第一个字母大写。

添加到组件 v-model 的修饰符将通过 modelModifiers prop 提供给组件。在下面的示例中，我们创建了一个组件，其中包含默认为空对象的 modelModifiers prop。

请注意，当组件的 created 生命周期钩子触发时，modelModifiers prop 包含 capitalize，其值为 true——因为它被设置在 v-model 绑定 v-model.capitalize="bar"。

<template>
  <div class="capitalize">
    <CapitalizeChild v-model:myText.capitalize="myText"></CapitalizeChild>
  </div>
</template>

<script>
import CapitalizeChild from "./CapitalizeChild.vue";
export default {
  data() {
    return {
      myText: "我是第一个名字",
    };
  },
  components: {
    CapitalizeChild,
  },
};
</script>

// 子组件
<template>
  <div class="capitalize-child">
    <input type="text" v-model="myText" />
  </div>
</template>

<script>
export default {
  props: {
    myText: String,
    myTextModifiers: {
      default: () => ({})
    }
  },
  emits: ["update:myText"],
  created() {
    console.log(this.myTextModifiers) // { capitalize: true }
  }
};
</script>

现在我们已经设置了 prop，我们可以检查 modelModifiers 对象键并编写一个处理器来更改发出的值。在下面的代码中，每当 <input/> 元素触发 input 事件时，我们都将字符串大写。

<template>
  <div class="capitalize-child">
    <input type="text" v-model="myText" @input="emitValue" />
  </div>
</template>

<script>
export default {
  props: {
    myText: String,
    myTextModifiers: {
      default: () => ({}),
    },
  },
  emits: ["update:myText"],
  created() {
    console.log(this.myTextModifiers); // { capitalize: true }
  },
  methods: {
    emitValue(e) {
      let value = e.target.value;
      if (this.myTextModifiers.capitalize) {
        value = value.charAt(0).toUpperCase() + value.slice(1);
      }
      this.$emit("update:myText", value);
    },
  },
};
</script>

对于带参数的 v-model 绑定，生成的 prop 名称将为 arg + "Modifiers"